import React, {useEffect, useState} from 'react';
import {getMessageList} from "../api/message";
import {NavLink,Outlet,useNavigate} from "react-router-dom";

function Message(props) {
    const navigate = useNavigate()
    // const {dispatch} = props
    const [messageList,setMessageList] = useState([])
    useEffect(()=>{
        (async ()=>{
            // dispatch({type:'show',payload:true})
            const res = await getMessageList()
            setMessageList(res)
            // dispatch({type:'hide',payload:false})
        })()
    },[])
    return (
        <div>
            <ul>
                {messageList.map(list=>(
                    <li key={list.id}>
                        <NavLink to={list.id}>{list.title}</NavLink> &nbsp;&nbsp;
                        <button onClick={()=>navigate(`${list.id}`)}>push</button>
                        &nbsp;
                        <button onClick={()=>navigate({pathname:`${list.id}`},{replace:true})}>replace</button>
                    </li>
                ))}

            </ul>
            <button onClick={()=>navigate(1)}>前进</button>
            <button onClick={()=>navigate(-1)}>后退</button>
            <hr/>
            <Outlet/>
        </div>
    );
}

export default Message;